@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@300;400;600&display=swap');

:root {
    --primary-color: #0A3D62; /* Deep Blue */
    --accent-color: #F4C724; /* Golden Yellow */
    --background-color: #F8F9FA; /* Light Gray */
    --text-color: #333333; /* Dark Gray */
    --cta-color: #E74C3C; /* Vibrant Red */
}

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styling */
html, body {
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal overflow */
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-color);
    background: linear-gradient(to right, #8360c3, #2ebf91);
}

/* Typography */
h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--primary-color); /* Set headers to primary color (Deep Blue) */
}

/* Add this CSS rule to style the email link */
a {
    color: inherit; /* Inherit the color from the parent element */
    text-decoration: none; /* Remove the underline */
}

a:hover {
    color: #F4C724; /* Change color on hover */
}

/* Example of specific styling for email links */
.email-link {
    color: var(--text-color); /* Use your desired color */
}

.email-link:hover {
    color: #F4C724; /* Change color on hover */
}

/* CTA Button Styles */
.cta-btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 20px; /* Add margin to lower the buttons */
}
  
/* Primary Button */
.cta-btn.primary {
    background-color: #007bff;
    color: white;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2);
}
  
.cta-btn.primary:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 10px rgba(0, 123, 255, 0.3);
}
  
.cta-btn.primary:active {
    background-color: #00408a;
    transform: scale(0.98);
}
  
/* Secondary Button */
.cta-btn.secondary {
    background-color: #6c757d;
    color: white;
    border: none;
    box-shadow: 0 4px 6px rgba(108, 117, 125, 0.2);
}
  
.cta-btn.secondary:hover {
    background-color: #545b62;
    box-shadow: 0 6px 10px rgba(108, 117, 125, 0.3);
}
  
.cta-btn.secondary:active {
    background-color: #3e444a;
    transform: scale(0.98);
}
  
/* Outlined Button */
.cta-btn.outlined {
    background-color: transparent;
    color: #007bff;
    border: 2px solid #007bff;
}
  
.cta-btn.outlined:hover {
    background-color: #007bff;
    color: white;
}
  
.cta-btn.outlined:active {
    background-color: #0056b3;
    border-color: #0056b3;
    transform: scale(0.98);
}

.container {
    width: 50%;
    margin: 50px auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
h2 {
    text-align: center;
    color: var(--primary-color); /* Set header color to primary color (Deep Blue) */
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
}
.form-group {
    margin-bottom: 15px;
}
label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}
input, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
}
button {
    width: 100%;
    padding: 10px;
    border: none;
    background: #007bff;
    color: white;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
}
button:hover {
    background: #0056b3;
}
.error-message {
    color: red;
    font-size: 14px;
    display: none;
}
#responseMessage {
    text-align: center;
    font-size: 16px;
    margin-top: 10px;
}

/* Hero Section */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    height: 60vh;
    color: var(--text-color);
    font-family: 'Montserrat', sans-serif; /* Ensure the font matches the defined typography */
    margin-top: 80px; /* Add margin to push the hero section below the nav bar */
}

.hero-text {
    max-width: 50%;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: white;
    border-radius: 10px; /* Add padding to the left for all text in hero-text */
}

.hero-text h1, .hero-text p {
    margin: 0;
    color: #333333;
}

/* Add space between headers and paragraphs in the hero section */
.hero-text h1 {
    margin-bottom: 20px; /* Adjust the spacing between h1 and the paragraph */
    font-size: 28px;
    color: var(--primary-color); /* Set header color to primary color (Deep Blue) */
}

.hero-text p {
    font-size: 18px;
    margin-top: 15px; /* Adjust the spacing between p and the next element */
}

/* Adjust all text slightly to the left by modifying the padding-left */
.hero-text h1, .hero-text p {
    padding-left: 10px; /* Shift text a little to the left */
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding-top: 400px;
}

.container h2 {
    color: Black;
    display: flex;
    justify-content: flex-start;
}
/* Map Section */
.map-section {
    text-align: center;
    padding: 50px 0px;
}

.map-section h3 {
    font-size: 28px;
    margin-bottom: 20px;
    color: var(--primary-color); /* Set header color to primary color (Deep Blue) */
}

.map-container {
    max-width: 90%;
    height: 400px;
    margin: 10px auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Responsive Map */
.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

footer {
    background-color: #222;
    color: white;
    padding: 40px 20px;
    font-size: 16px;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-section {
    flex: 1;
    min-width: 250px;
    margin: 10px;
}

.footer-section h3 {
    margin-bottom: 15px;
    font-size: 18px;
    color: #ffcc00;
}

.footer-section p {
    margin: 5px 0;
    color: white;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section ul li a {
    color: white;
    text-decoration: none;
    transition: 0.3s;
}

.footer-section ul li a:hover {
    color: #ffcc00;
}

.whatsapp img {
    width: 200px;  /* Adjust the size as needed */
    height: auto;
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 1000; /* Keeps it above other elements */
}
/* Social Media Links */
.social-links a {
    color: white;
    font-size: 20px;
    margin-right: 15px;
    transition: 0.3s;
}

.social-links a:hover {
    color: #ffcc00;
}

/* Responsive Design */
@media (max-width: 768px) {

    .hero-section {
        flex-direction: column-reverse; /* Image first, then text */
        height: auto; /* Let content define height */
        text-align: center; /* Center-align content */
    }

    .hero-image img {
        width: 100%;
        height: auto; /* Maintain aspect ratio */
        padding-top: 0; /* Remove excessive top padding */
    }

    .hero-text {
        max-width: 100%; /* Full width on mobile */
        padding: 20px;
    }

    .container {
        width: 90%; /* Make the form take up 90% of the screen width */
        max-width: none; 
        margin: 0 auto; 
        padding: 20px; 
        
    }

    .whatsapp img {
        width: 100px;  /* Adjust the size as needed */
        height: auto;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000; /* Keeps it above other elements */
    }
}